<template>
  <el-container>
    <el-aside width="200px">
      <h1>权限管理系统</h1>
      <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#001529" text-color="#fff"
        active-text-color="#ffd04b" @open="handleOpen" @close="handleClose" @select="selectItem">
        <el-submenu v-show="allOk" index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>系统设置</span>
          </template>
          <el-menu-item index="/dashboard/users">用户管理</el-menu-item>
          <el-menu-item index="/dashboard/roles">角色管理</el-menu-item>
          <el-menu-item index="/dashboard/menus">菜单管理</el-menu-item>
        </el-submenu>
        <el-submenu v-show="ok" index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">商品管理</span>
          </template>
          <el-menu-item index="2-1">商品列表</el-menu-item>
        </el-submenu>
        <el-submenu v-show="ok" index="3">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span slot="title">订单管理</span>
          </template>
          <el-menu-item index="3-1">订单列表</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <div class="info">
        <h3>【您是用户】：{{ userName }}</h3>
        <h3>【您的身份】：{{ roleName }}</h3>
      </div>
      <router-view />
    </el-main>
  </el-container>
</template>

<script>

export default {
  data() {
    return {
      userName: 'admin',
      roleName: '超级管理员',
      allOk: true,
      ok: true
    }
  },
  mounted() {
    this.queryInfo();
  },
  methods: {
    queryInfo() {
      const tokenValue = window.localStorage.getItem("token_key");
      const user = JSON.parse(tokenValue);
      this.userName = user.userName;
      this.roleName = user.roleName;
      if(user.roleId == 1) {
        this.allOk = true;
        this.ok = true;
      } else if(user.roleId == 2) {
        this.allOk = false;
        this.ok = true;
      }

    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    selectItem(index) {
      this.$router.push(index);
    }
  },
}

</script>

<style>
.el-aside {
  background-color: #001529;
  color: #333;
  text-align: center;
  overflow: hidden;
  height: 100vh;
}

.el-aside h1 {
  font-size: 20px;
  background-color: #001529;
  color: white;
  height: 60px;
  line-height: 60px;
}

.el-aside .el-menu {
  width: 200px;
}

.el-main {
  width: 100%;
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

.info {
  position: relative;
  width: 300px;
  height: 50px;
  left: 55px;
}

.info h3 {
  position: absolute;
  left: 0;
}

.info h3:nth-child(2) {
  margin-top: 20px;
}

body>.el-container {
  margin-bottom: 40px;
  height: 100%;
}
</style>
